<template   >
  <el-dialog
    :title="isall ? '编辑学科' : '添加学科'"
    :visible.sync="dialogVisible"
    width="25%"
    :before-close="handleClose"
  >
    <span>
      <!--  -->
      <el-form
        :model="froms"
        ref="ruleForm"
        :rules="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="froms.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <!--  -->
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { add, update } from '@/api/hmmm/subjects'
export default {
  props: {
    tableData: {
      type: Array,
      required: () => {}
    }
  },
  data () {
    return {
      isall: false,
      dialogVisible: false,
      froms: {
        subjectName: '',
        isFrontDisplay: 1,
        id: null
      },

      value: true,

      ruleForm: {
        subjectName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    value: {
      handler (newVal) {
        if (newVal) {
          this.froms.isFrontDisplay = 1
        } else {
          this.froms.isFrontDisplay = 0
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 添加学科
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.isall === false) {
            // 添加
            if (this.value === false) {
              this.froms.isFrontDisplay = 0
            }
            const res = await add(this.froms)
            console.log(res)
            this.dialogVisible = false
            this.froms.subjectName = ''

            this.$emit('acc')
          } else {
            // if (this.value === true) {
            //   this.froms.isFrontDisplay = 1
            // } else if (this.value === false) {
            //   this.froms.isFrontDisplay = 0
            // }
            // console.log(this.row.id)
            const res = await update(this.froms)
            if (res.status === 200) {
              console.log(1111111111111111)
              this.dialogVisible = false

              this.$emit('abb')
              return (this.isall = false)
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss">
.dialog-footer {
  padding-left: 180px;
}
.el-dialog__body {
  padding-left: 0;
}
</style>
